
<script setup lang='ts'>
import {} from 'vue'
import {useRouter} from "vue-router"
const router = useRouter()
const backHome = ()=>{
    router.push("/")
}
const renovate = ()=>{
    window.location.reload();
}
</script>
<template>
    <div class="app-container">
        <div class="contain">
            <svg-icon name="404" class="pageIcon"></svg-icon>
            <div class="desc">
                <h2>404</h2>
                <p>抱歉,你的页面不见了</p>
                <span>我们正在全力搜查中,请点击 <el-link type="primary" @click="backHome">返回首页</el-link> </span>
            </div>
        </div>
        <div class="btns">
            <el-button size="small" @click="renovate">刷新试试</el-button>
        </div>
    </div>
</template>
<style lang='scss' scoped>
.contain{
    width:100%;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
}
 .pageIcon{
     font-size: 500px;
 }
 .desc{
      text-align: center;
     h2{
         font-size: 150px;
         margin:0;
         margin-bottom: 20px;
     }
     p{
         text-align: left;
         font-size: 30px;
         margin:0;
     }
     
 }
 .btns{
     margin: 0 auto;
     text-align: center;
 }
</style>